<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue练习初步</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.min.js"></script>
</head>
<body>

<div class="root">
    <h2 :style="{opacity:opacity_val}">透明度变化</h2>
    <button @click="isOpacity()">变化？{{ isChange }}</button>
</div>

<script>
    new Vue({
        el: '.root',
        data: {
            opacity_val: 1.0,
            controller: true,
            isChange: true,
        },
        methods: {
            isOpacity() {
                this.isChange = !this.isChange;
            }
        },
        mounted() {
            this.opacity_timer = setInterval(() => {
                if (this.isChange) {
                    if (this.controller) {
                        this.opacity_val -= 0.01;
                    } else {
                        this.opacity_val += 0.01;
                    }
                    if (this.opacity_val <= 0 || this.opacity_val >= 1) {
                        this.controller = !this.controller;
                    }
                }
            }, 10);
        },
        beforeDestroy() {
            console.log("销毁前的操作：做清理工作，如自己创建的定时器");
        }
    });
</script>

</body>
</html>